<template>
  <view class="register-page">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="back-btn" @tap="goBack">
        <image class="back-icon" src="/static/Profile/箭头-左.png" mode="aspectFit"></image>
      </view>
      <view class="page-title">新用户注册</view>
      <view class="empty"></view>
    </view>

    <!-- 注册表单 -->
    <view class="form-area">
      <!-- 手机号 -->
      <view class="form-item">
        <image class="input-icon" src="/static/Dl/手机.png" mode="aspectFit"></image>
        <input 
          class="form-input" 
          type="text" 
          placeholder="请输入手机号" 
          v-model="formData.phone"
          maxlength="11"
          placeholder-style="color: #cccccc;"
        />
      </view>
      
      <!-- 验证码 -->
      <view class="form-item verify-item">
        <image class="input-icon" src="/static/Dl/验证码.png" mode="aspectFit"></image>
        <input 
          class="form-input" 
          type="text" 
          placeholder="请输入验证码" 
          v-model="formData.code"
          maxlength="6"
          placeholder-style="color: #cccccc;"
        />
        <button 
          class="verify-btn" 
          @tap="sendCode"
          :disabled="isCounting"
        >
          {{ isCounting ? `${countDown}s后重发` : '获取验证码' }}
        </button>
      </view>
      
      <!-- 密码 -->
      <view class="form-item">
        <image class="input-icon" src="/static/Dl/密码 .png" mode="aspectFit"></image>
        <input 
          class="form-input" 
          :type="showPwd ? 'text' : 'password'" 
          placeholder="请设置密码（6-20位）" 
          v-model="formData.password"
          placeholder-style="color: #cccccc;"
        />
        <image 
          class="eye-icon" 
          :src="showPwd ? '/static/Dl/睁眼.png' : '/static/Dl/闭眼.png'"
          @tap="togglePwd"
          mode="aspectFit"
        ></image>
      </view>
      
      <!-- 确认密码 -->
      <view class="form-item">
        <image class="input-icon" src="/static/Dl/密码 .png" mode="aspectFit"></image>
        <input 
          class="form-input" 
          :type="showConfirm ? 'text' : 'password'" 
          placeholder="请再次输入密码" 
          v-model="formData.confirmPwd"
          placeholder-style="color: #cccccc;"
        />
        <image 
          class="eye-icon" 
          :src="showConfirm ? '/static/Dl/睁眼.png' : '/static/Dl/闭眼.png'"
          @tap="toggleConfirm"
          mode="aspectFit"
        ></image>
      </view>
      
      <!-- 注册按钮 -->
      <view class="form-item form-action">
        <button class="register-btn" @tap="handleRegister" :disabled="isSubmitting">
          <template v-if="isSubmitting">注册中...</template>
          <template v-else>立即注册</template>
        </button>
      </view>
    </view>
    
    <!-- 协议勾选 -->
    <view class="agreement">
      <label class="checkbox-wrapper">
        <checkbox class="agree-checkbox" :checked="agreed" @tap.stop="toggleAgreement"></checkbox>
        <text class="agreement-text">我已阅读并同意</text>
        <text class="link" @tap="toProtocol('all')">《用户协议》</text>
        <text class="agreement-text">和</text>
        <text class="link" @tap="toProtocol('privacy')">《隐私政策》</text>
      </label>
    </view>
    
    <!-- 已有账号登录 -->
    <view class="login-link">
      <text class="normal-text">已有账号？</text>
      <text class="nav-link" @tap="goToLogin">立即登录</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

interface FormData {
  phone: string
  code: string
  password: string
  confirmPwd: string
}

// 表单数据
const formData = ref<FormData>({
  phone: '',
  code: '',
  password: '',
  confirmPwd: ''
})

// 密码显示状态
const showPwd = ref(false)
const showConfirm = ref(false)

// 验证码倒计时
const isCounting = ref(false)
const countDown = ref(60)
let timer: NodeJS.Timeout | null = null

// 提交状态
const isSubmitting = ref(false)

// 协议同意状态
const agreed = ref(false)

// 发送验证码
const sendCode = () => {
  const { phone } = formData.value
  if (!/^1[3-9]\d{9}$/.test(phone)) {
    uni.showToast({ title: '请输入有效手机号', icon: 'none' })
    return
  }
  isCounting.value = true
  timer = setInterval(() => {
    countDown.value--
    if (countDown.value <= 0) {
      clearInterval(timer as NodeJS.Timeout)
      isCounting.value = false
      countDown.value = 60
    }
  }, 1000)
  uni.showToast({ title: '验证码已发送', icon: 'none' })
}

// 切换密码显示
const togglePwd = () => showPwd.value = !showPwd.value
const toggleConfirm = () => showConfirm.value = !showConfirm.value

// 切换协议同意状态
const toggleAgreement = () => {
  agreed.value = !agreed.value
}

// 跳转到协议页
const toProtocol = (type: 'user' | 'privacy' | 'all') => {
  uni.navigateTo({
    url: `/pages/Dl/agreement?type=${type}`
  })
}

// 注册逻辑
const handleRegister = async () => {
  // 表单校验
  if (!agreed.value) {
    uni.showToast({ title: '请先同意用户协议和隐私政策', icon: 'none' })
    return
  }
  if (!/^1[3-9]\d{9}$/.test(formData.value.phone)) {
    uni.showToast({ title: '请输入有效手机号', icon: 'none' })
    return
  }
  if (formData.value.code.length !== 6) {
    uni.showToast({ title: '请输入6位验证码', icon: 'none' })
    return
  }
  if (formData.value.password.length < 6 || formData.value.password.length > 20) {
    uni.showToast({ title: '密码长度需在6-20位之间', icon: 'none' })
    return
  }
  if (formData.value.password !== formData.value.confirmPwd) {
    uni.showToast({ title: '两次密码输入不一致', icon: 'none' })
    return
  }

  // 模拟注册请求
  isSubmitting.value = true
  try {
    await new Promise((resolve) => setTimeout(resolve, 1500))
    uni.showToast({ title: '注册成功', icon: 'success' })
    setTimeout(() => {
      uni.redirectTo({ url: '/pages/login/login' })
    }, 1500)
  } catch (error) {
    uni.showToast({ title: '注册失败，请重试', icon: 'none' })
    console.error('注册失败：', error)
  } finally {
    isSubmitting.value = false
  }
}

// 页面跳转
const goBack = () => uni.navigateBack({ delta: 1 })
const goToLogin = () => uni.redirectTo({ url: '/pages/login' })

// 页面卸载时清除定时器
onMounted(() => {
  return () => {
    if (timer) clearInterval(timer)
  }
})
</script>

<style lang="css" scoped>
.register-page {
  padding: 0 30rpx;
  background-color: #ffffff;
  min-height: 100vh;
  box-sizing: border-box;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  

}

.back-btn {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.page-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.empty {
  width: 44rpx;
}

.form-area {
  margin: 60rpx 0;
}

.form-item {
  display: flex;
  align-items: center;
  height: 100rpx;
  background-color: #f8f8f8;
  border-radius: 16rpx;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
}

.input-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.form-input {
  flex: 1;
  height: 100%;
  font-size: 30rpx;
  color: #333333;
  background-color: transparent;
  border: none;
  outline: none;
}

.verify-item {
  padding-right: 15rpx;
}

.verify-btn {
  width: 180rpx;
  height: 70rpx;
  background-color: #fd091f;
  color: #ffffff;
  font-size: 24rpx;
  border-radius: 12rpx;
  border: none;
  margin-left: 15rpx;
}

.verify-btn:disabled {
  background-color: #ffccb3;
  opacity: 0.8;
}

.eye-icon {
  width: 40rpx;
  height: 40rpx;
  cursor: pointer;
}

.form-action {
  margin-top: 50rpx;
}

.register-btn {
  width: 100%;
  height: 100rpx;
  background: linear-gradient(90deg, #ff6b35, #fd091f);
  border-radius: 50rpx;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
}

.register-btn:active {
  opacity: 0.8;
}

.register-btn:disabled {
  background: #ffccb3;
  opacity: 0.8;
}

.agreement {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  font-size: 24rpx;
  color: #999999;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
}

.agree-checkbox {
  transform: scale(0.8);
  margin-right: 8rpx;
}

.agreement-text {
  margin: 0 5rpx;
}

.link {
  color: #fd091f;
  cursor: pointer;
}

.login-link {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}

.normal-text {
  font-size: 28rpx;
  color: #999999;
}

.nav-link {
  font-size: 28rpx;
  color: #fd091f;
  margin-left: 10rpx;
  cursor: pointer;
}
</style>